<template>
  <div>
    <div class="zhibanbiaos">
      <div class="section1 flex-row">
        <div class="main2 flex-col">
          <!-- 1 -->
          <div class="mintes flex-row">
            <!-- 日期 -->
            <el-date-picker
              @change="Get_Alldutys"
              value-format="yyyy-MM"
              v-model="value2"
              type="month"
              placeholder="选择月"
            ></el-date-picker>

            <el-select v-model="nOid" placeholder="单位名称" @change="twoxuan">
              <el-option @click="cxqr" label="全部" value="全部"></el-option>
              <el-option
                v-for="item in yhGetAllusers"
                :key="item.nOrid"
                :label="item.sOrName"
                :value="item.nOrid"
              ></el-option>
            </el-select>
            <!-- /单位 -->

            <!-- 人员 -->
            <el-select v-model="nUid" placeholder="人员" @change="twoxuan">
              <el-option @click="cxqr" label="全部" value="全部"></el-option>
              <el-option
                v-for="item in yhGetAllusers"
                :key="item.nUid"
                :label="item.sName"
                :value="item.nUid"
              ></el-option>
            </el-select>
            <!-- 查询 -->
            <el-button class="chaxun" @click="Selectdutydetail">查询</el-button>
            <!-- /查询 -->
            <el-row>
              <el-button class="daochu" @click="exportBtn">导出值班表</el-button>
              <!-- <el-button type="primary" class="baocun">保存</el-button> -->
            </el-row>
          </div>
          <!-- /1 -->
          <div class="table1">
            <table
              ref="exportTableRef"
              border="1"
              cellspacing="0"
              cellpadding="0"
              style="border-color:#F8F8F8"
            >
              <tr class="first-tr">
                <td class="first">单位</td>
                <td class="first">姓名</td>
                <td class="date-time" id="ady" v-for="item in getDate" :key="item.id">
                  <span>{{item}}</span>
                  <template>
                    <span class="time" v-if="(weeks+item-1)%7==1">一</span>
                    <span class="time" v-if="(weeks+item-1)%7==2">二</span>
                    <span class="time" v-if="(weeks+item-1)%7==3">三</span>
                    <span class="time" v-if="(weeks+item-1)%7==4">四</span>
                    <span class="time" v-if="(weeks+item-1)%7==5">五</span>
                    <span class="time" v-if="(weeks+item-1)%7==6">六</span>
                    <span class="time" v-if="(weeks+item-1)%7==0">日</span>
                  </template>
                </td>
              </tr>
              <tr
                v-for="item in yhGetAllusers"
                :key="item.nOrid"
                :id="item.nUid"
                @click="hqid(item.nUid)"
              >
                <td class="second">{{item.sOrName}}</td>
                <!--  @click="PostAddduty(item.id)" -->
                <td class="second">{{item.sName}}</td>
                <template>
                  <td @click="tdid(a)" :id="a" v-for="a in getDate" :key="a.id">
                    <template v-for="b in ztAllusers">
                      <span :key="b.nUid" v-if="item.nUid==b.nUid && a==b.nDutyId">
                        <span v-if="b.nWork==1">值班</span>
                        <span v-if="b.nWork==2">带班</span>
                        <span v-if="b.nWork==3"></span>
                      </span>
                    </template>
                    <!-- 为表格添加值班信息 -->
                    <span v-if="a==tds.tdiss && item.nUid==huoqunUid.huoqu">{{buttons}}</span>
                    <el-popover id="pop" placement="right" width="230" trigger="click">
                      <el-div class="table2">
                        <span class="paiban1">排班设置</span>
                        <span class="paiban2" v-for="(c,index) in zhiban" :key="c.id" :id="1">
                          <div @click="PostAddduty(index)">{{c.inxi}}</div>
                        </span>
                        <br />
                      </el-div>
                      <el-button :id="a.id" slot="reference"></el-button>
                    </el-popover>
                  </td>
                </template>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
import FileSaver from 'file-saver'
export default {
  data () {
    return {
      suzi: 0,
      weekDay: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
      //接收td的id值
      Tdarr: [],
      buttons: '',
      // 存储当前点击列的id
      tds: {},
      // 存储当前点击行的id
      huoqunUid: {},
      // 值班
      zhiban: [
        { id: 1, inxi: '值班' },
        { id: 2, inxi: '带班' },
        { id: 3, inxi: '清空' },
      ],
      weeks: 0,
      // 值班状态
      ztAllusers: [],
      // 获取所有用户
      yhGetAllusers: [],
      // 当前月份的天数
      getDate: '',
      constants: {},
      duties: ['值班', '带班', '清空'],

      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value2: '',
      nOid: '',
      nUid: '',
      dTime: '',
      SelectdutydetailEmpty: [
        // {
        //   sName: '33',
        //   nUid: '1',
        //   sOrName: '22',
        //   nOrid: '55'
        // }
      ],
      // 当前周几
      days: 0,
      constDayOfWeek: [],
      arr: []
    };
  },
  created () {
    this.yrenxinix()
    this.date()
    this.zbGetAllusers()
    // this.Get_Alldutys()
    // this.PostAddduty()
  },
  watch: {
    value2 (val) {
      console.log(val, 'value2');
      let mm = val.split('-');    //把2020-11变成需要传输的样子：2020和11
      this.getDaysInMonth(mm[0], mm[1])
    },
  },
  methods: {
    cxqr () {
      // this.SelectdutydetailEmpty = []
      // // this.Get_Alldutys()
      // // this.$router.go(0)
      // this.zbGetAllusers()

      // this.getFullYear
    },
    WeekDates () {
      // console.log(new Date());

      var date = new Date(this.value2);
      date.setDate(1);
      var week = date.getDay();
      console.log('循环week的日期', week);
      console.log('this.value2 日期选择器选择的日期', this.value2);
      // var weeks;
      // var constDayOfWeek = [];
      for (var j = week; j <= 7 + week; j++) {
        if ((j % 7) == 1) {
          this.weeks = 1;
        } else if ((j % 7) == 2) {
          this.weeks = 2;
        } else if ((j % 7) == 3) {
          this.weeks = 3;
        } else if ((j % 7) == 4) {
          this.weeks = 4;
        } else if ((j % 7) == 5) {
          this.weeks = 5;
        } else if ((j % 7) == 6) {
          this.weeks = 6;
        } else if ((j % 7) == 0) {
          this.weeks = 0;
        }
        this.constDayOfWeek.push(this.weeks);
      }

      date.setMonth(date.getMonth() + 1);
      var lastDate = new Date(date - 3600000 * 24);
      // 本月第一天为周几
      this.days = lastDate.getDay()
      console.log(this.days);
      console.log(this.weeks);
      // for (let i = 1; i <= this.getDate; i++) {
      //   console.log(i);
      // }
    },
    // 获取选择日期的月份,来渲染天数
    getDaysInMonth (year, month) {
      let temp = new Date(year, month, 0);
      let mm = temp.getDate(); //mm天数
      console.log('mm', mm);
      this.getDate = []
      this.getDate = mm
    },
    //值班表查询接口
    async Selectdutydetail () {
      console.log(this.value2);
      var sj = this.value2 + '-01'
      let formData = new FormData()
      formData.append('innOid', this.nOid)
      formData.append('innUid', this.nUid)
      formData.append('indTime', sj)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/duty/Post_Selectdutydetail', formData, config)
      console.log(res, 'res');
      this.SelectdutydetailEmpty = res
      this.yhGetAllusers = this.SelectdutydetailEmpty
      // this.SelectdutydetailEmpty = []
      // this.yhGetAllusers = []
      // this.zbGetAllusers()
    },

    // 获取所有值班信息
    async Get_Alldutys () {
      var times = this.value2
      console.log(times);
      const { data: res } = await this.$http.get('api/duty/Get_Alldutys', {
        params: {
          indDateTime: times
        }
      })
      console.log(res, 'resres');
      this.ztAllusers = res
      this.WeekDates()

      // 当前日期对应的周几
      // var Setime = this.getDate
      // var ji = new Date(Setime).getDay()
      // var date = new Date(Setime)
      // var timeList = []
      // for (let i = 1 - ji; i < 8 - ji; i++) {
      //   var q = new Date()
      //   // console.log(i);
      //   let tt = q.setTime(date.getTime() + 3600 * 1000 * 24 * i)
      //   let td = new Date(tt)
      //   let time = td.getFullYear() + '-' + (td.getMonth() + 1) + '-' + td.getDate()
      //   timeList.push(time)

      // }
      // this.timeData = []
      // for (let i = 0; i < 7; i++) {
      //   timez: timeList[i]
      //   label: i + 1

      // }
    },
    async twoxuan () {
      this.SelectdutydetailEmpty = []
      this.yhGetAllusers = []
      this.zbGetAllusers()
      // console.log(this.value2);
      var sj = this.value2 + '-01'
      let formData = new FormData()
      formData.append('innOid', this.nOid)
      formData.append('innUid', this.nUid)
      formData.append('indTime', sj)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/duty/Post_Selectdutydetail', formData, config)
      console.log(res, 'res');
      this.SelectdutydetailEmpty = res
      this.yhGetAllusers = this.SelectdutydetailEmpty
      this.SelectdutydetailEmpty = []
      // this.yhGetAllusers = []
      // this.zbGetAllusers()
    },
    // 点击值班拿id
    // td id
    tdid (t) {
      console.log(t);
      this.tds = { tdiss: t }
    },
    // 拿到当前点击的nUid
    hqid (index) {
      // tr  id
      this.huoqunUid = { huoqu: index }
    },
    // a  值班带班清空下标
    async PostAddduty (a) {
      // 列id
      var hql = this.tds.tdiss
      console.log(hql);
      if (hql < 10) {
        var yue = '0' + hql
        console.log(yue);
      } else {
        yue = hql + ''
      }
      // 获取当前时间
      var times = this.value2 + '-' + yue
      console.log(times);
      // 行id
      var hqs = this.huoqunUid.huoqu
      console.log(hqs);
      // 填充内容
      // if (a === 2) {
      //   this.buttons = ''
      // }
      // else if (a === 1) {
      //   this.buttons = '带班'
      // }
      // else {
      //   this.buttons = '值班'
      // }

      let formData = new FormData()
      formData.append('innDutyId', hql)
      formData.append('innUid', hqs)
      formData.append('indTime', times)
      formData.append('innWork', a + 1)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/duty/Post_Addduty', formData, config)
      console.log(res);
      this.Get_Alldutys()
    },
    // 获取当前月份
    async yrenxinix () {
      var date = new Date;
      var month = date.getMonth() + 1;
      month = (month < 10 ? "0" + month : month);
      var year = date.getFullYear();
      var mydate = month.toString();
      // console.log(mydate);
      // console.log(year);
      const { data: res } = await this.$http.get('/api/duty/Get_Alldutys', {
        params: {
          DDateTime: mydate
        }
      })
      console.log(res);
      // 获取当前周几
      let dt2 = new Date(date);
      var weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      if (weekDay.indexOf(weekDay[dt2.getDay()]) > -1) {
        // return weekDay[dt2.getDay()]
        // console.log(weekDay[dt2.getDay()]);
      }

    },
    // 获取所有用户
    async zbGetAllusers () {
      const { data: res } = await this.$http.get('/api/user/Get_Allusers')
      console.log(res);
      // var arr = []
      // res.forEach(item => {
      //   var obj = {
      //     sOrName: item.sOrName,
      //     nOrid: item.nOrid
      //   }
      //   arr.push(obj)
      // });
      // console.log(arr, 'arr')
      // this.arr = res

      this.yhGetAllusers = res
    },
    // 获取当前这个月有多少天
    date () {
      var cur = new Date();
      this.getDate = new Date(cur.getFullYear(), cur.getMonth() + 1, 0).getDate();//天数
      // this.value2 = new Date()
    },
    // 导出值班表
    exportBtn () {
      // 获取表格元素
      const el = this.$refs.exportTableRef
      // 文件名
      const filename = '导出.xlsx'
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(el)
      /* 或者用id */
      // const wb = XLSX.utils.table_to_book(document.getElementById("id"))
      /* get binary string as output */
      const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), filename)
      } catch (e) {
        console.log(e)
      }
      return wbout
    },
    onClick_1 () {
      alert(1);
    },
    onClick_2 () {
      alert(1);
    },
    onClick_3 () {
      alert(1);
    },
    show () {
    },

  }
};
</script>
<style scoped lang="css" src="./assets/index.css" />
